<template>
  <van-search
    v-model="searchContext"
    :placeholder="searchPlace"
    left-icon="''"
    right-icon="search"
    @search="searchList"
    @clear="searchList"
    @click-right-icon="searchList"
  />
  <van-tabs v-model:active="activeTab" class="index-tabs" :lazy-render="false" @change="tabChange">
    <van-tab
      v-for="item in tabList"
      :title="item.title"
      :name="item.name"
      :key="item.name"
    >
      <VideoList
        ref="videoListRef"
        :name="item.name"
        :is-live="isLive"
        :search-context="searchContext"
      ></VideoList>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { nextTick, onActivated, ref, onMounted, defineExpose } from 'vue'
import VideoList from './index-list.vue'

const props = defineProps({
  searchPlace: {
    type: String,
    default: '请输入点播标题'
  },
  tabList: {
    type: Array,
    default: () => []
  },
  isLive: {
    type: Boolean,
    default: true
  }
})

const activeTab = ref(props.tabList[0].name)
const searchContext = ref('')

const videoListRef = ref(null)

const tabChange = (name, title) => {
  searchContext.value = ''
  refGetData()
}

const refGetData = async() => {
  await nextTick()
  const index = props.tabList.findIndex((item) => item.name === activeTab.value)
  if (videoListRef.value && index > -1 && videoListRef.value[index]) {
    videoListRef.value[index].getData(true)
  }
}

const searchList = () => {
  refGetData()
}

defineExpose({
  refGetData
})

</script>
